<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    h1 {
      display: block;
    }
  </style>

  <body>
    <div id="box">
      <h1>我是一张缺省图</h1>
    </div>
  </body>
</html>

<script>
  /**
   * @param {String} url
  */
  function loadImageAsync(url) {
    return new Promise((resolve, reject) => {
      var image = new Image()

      image.onload = resolve(image)
      image.onerror = reject('could not load image at' + url)
      image.src = url
    }) 
  }

  // 测试
  var oBox = document.getElementById('box')
  var oH = document.querySelector('h1')
  var url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  setTimeout(() => {
    loadImageAsync(url).then(res => {
      oH.style.display = 'none'
      oBox.appendChild(res)
    })
  }, 1000)
</script>
